<script setup lang="ts"></script>

<template>
  <div id="app">
    <HeaderMenu />
    <main class="main-content w-screen h-screen">
      <router-view />
    </main>
  </div>
</template>

<script setup lang="ts">
import HeaderMenu from '@/components/HeaderMenu.vue'
</script>

<style>
.header-menu.el-menu--horizontal > .el-menu-item.is-active {
  color: var(--el-text-color-primary);
}
.header-menu.scrolled.el-menu--horizontal > .el-menu-item.is-active {
  color: var(--color-secondary) !important;
  border-bottom: 2px solid var(--color-secondary) !important;
}
.header-menu.scrolled.el-menu--horizontal > .el-menu-item:hover {
  color: var(--color-secondary) !important;
}
</style>
